<template>
  <d2-container>
    <div class="bindingShops">
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="店铺类型选择：" prop="wangwang" style="position: relative;left: 15px">
            <el-select v-model="form.type" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="店铺名" prop="wangwang" style="position: relative;left: 15px">
            <el-input v-model.trim="form.shop" placeholder="请输入店铺名" style="width: 215px;margin-top:-9px;">
            </el-input>
          </el-form-item>
          <el-form-item style="position: relative;left: 10px;">
            <el-button type="primary" style="margin-left:10px;" size="mini" @click="infos">查询</el-button>
            <el-button :loading="bindloading" @click="onSubmit" type="primary" style="width:100px;" size="mini">
              绑定
            </el-button>
          </el-form-item>
          <el-form-item style="position: relative;left: 10px;">
            <el-button @click="classDialog = true" type="primary" style="width:100px;" size="mini">
              绑定店铺教程
            </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="titles">
        <h3 style="float:left;margin:0;">已绑定的店铺</h3>
      </div>
      <el-table v-loading="tableloading" :data="tableData4" style="width: 100%" border >
        <el-table-column type="index" align="center" prop="company_id" label="序号" width="60">
        </el-table-column>
        <el-table-column label="绑定店铺类型" prop="site_type" align="center" width="">
          <template slot-scope="scope">
            <span v-if="scope.row.site_type == 'tb'">淘宝店铺</span>
            <span v-if="scope.row.site_type == 'pdd'">拼多多店铺</span>
            <span v-if="scope.row.site_type == 'dy'">抖音店铺</span>
          </template>
        </el-table-column>
        <el-table-column label="店铺" prop="shopname" align="center" width="">
        </el-table-column>
        <el-table-column label="绑定时间" prop="create_time" align="center" width="">
        </el-table-column>
        <el-table-column label="授权" align="center" width="">
           <template slot-scope="scope">
                <el-button @click="active(scope.row)" type="danger">授权</el-button>
           </template>
        </el-table-column>
        <el-table-column label="过期时间" prop="update_time" align="center" width="">
          <template slot-scope="scope">
             <span v-show="scope.row.update_time!=0">{{scope.row.update_time*1000 | moment}}</span>
            <span v-show="scope.row.update_time==0">暂无授权</span>
          </template>
        </el-table-column>
        <el-table-column label="店铺操作" prop="taobao" width="200" align="center">
          <template slot-scope="scope">
            <el-button size="mini"  type="primary" @click="dlshop(scope)">删除</el-button>
            <el-button size="mini"  type="danger" @click="activation(scope.row)">更新</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="教程" :visible.sync="classDialog" width="45%">
        <div>
          <p>1.输入淘宝店铺名称进行绑定</p>
          <p>2.浏览器登陆店铺主账号</p>
          <p>3.绑定店铺成功后，订购订单管理服务，</p>
          <p><a href="https://c.tb.cn/Y4.4MQtU" target="_blank">https://c.tb.cn/Y4.4MQtU</a>月15元</p>
          <p><a href="https://c.tb.cn/Y4.4xpww" target="_blank">https://c.tb.cn/Y4.4xpww</a>季度32元</p>
          <p><a href="https://c.tb.cn/Y4.4I9QT" target="_blank">https://c.tb.cn/Y4.4I9QT</a>半年64元</p>
          <p><a href="https://c.tb.cn/Y4.4rrqJ" target="_blank">https://c.tb.cn/Y4.4rrqJ</a>年128元</p>
          <p>4.订购“九米好评”，尽量订购时间长点</p>
          <p>5.订购后服务市场里点击使用“九米好评”，点击使用</p>
          <p>6.进到这个页面即完成授权</p>
          <viewer>
            <p style="color:red;font-size:20px;">第一步：(购买)</p>
            <img style="width:80%;" src="../../../assets/22.jpg" alt="">
          </viewer>
          <viewer>
            <p style="color:red;font-size:20px;">第二步：(点击使用)</p>
            <img style="width:80%;" src="../../../assets/32.jpg" alt="">
          </viewer>
          <viewer>
            <p style="color:red;font-size:20px;">第三步：(显示该页面即购买成功)</p>
            <img style="width:80%;" src="../../../assets/12.jpg" alt="">
          </viewer>
        </div>
      </el-dialog>
    </div>
  </d2-container>
</template>
<script>
  import { userinfo,addshop,shoplist,delectshop,synchronizeshop } from '../../../api/api'
  export default {
    data() {
      return {
        // dateValue: "",
        defaultDate: "",
        shopname:"",
        currentTime: "",
        form: {
          shop: "",
          taobao: "",
          type: "all"
        },
        dialogs:false,
        options: [
          {
            value: 'all',
            label: '全部'
          },
          {
            value: 'dy',
            label: '抖音'
          },
          {
            value: 'ks',
            label: '快手'
          },
          {
            value: 'pdd',
            label: '拼多多'
          }, {
            value: 'tb',
            label: '淘宝'
          }
        ],
        radio: "1",
        formInline: {
          user: "",
          region: ""
        },
        userInfo: {},
        tableData4: [],
        money: "",
        isShow: false, //是否显示
        bindloading:false,
        tableloading:false,
        classDialog:false,
      };
    },

    //初始化
    created(){
      this.getShopList()
      this.getUser()
    },
    methods: {
      infos(){
        this.getShopList()
      },
      //获取用户信息
      getUser(){
        userinfo().then(res=>{
          if(res.Status == 200){
            this.$emit('getMoney',res.Data.money)
          }else{
            this.$message.error(res.Message)
          }
        })
      },
      //删除
      dlshop(item){
        var DlshopParams = {
          id:item.row.id,
        }
        delectshop(DlshopParams).then(res=>{
          if(res.Status == 200){
            this.getShopList()
            this.$message({
              type:"success",
              message:res.Message
            })
          }else{
            this.$message.error(res.Message)
          }
        })
      },
      //shop列表
      getShopList() {
        this.tableloading = true
        let params = {
          type:this.form.type
        }
        shoplist(params).then(res=>{
          this.tableloading = false
          if(res.Status == 200){
            for(let item of res.Data) {
              var timestamp4 = new Date(item.create_time* 1000)
              let timer = new Date(item.update_time* 1000)
              item.create_time =  timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8)
              // item.update_time = timer.toLocaleDateString().replace(/\//g, "-") + " " +timer.toTimeString().substr(0, 8)
            }
            this.tableData4 = res.Data
          }
        })
      },
      //添加店铺
      onSubmit() {
        let _this = this;
        _this.bindloading = true
        if(_this.form.type == "all"){
          _this.$message({
            type: "error",
            message: "请先选择店铺类型"
          });
        }else{
          if (_this.form.shop === "") {
            _this.$message({
              type: "error",
              message: "店铺名不能为空"
            });
            return;
          }else{
            var AddshopParams = {
              shopname:_this.form.shop,
              site_type:_this.form.type
            }
            addshop(AddshopParams).then(res=>{
              _this.bindloading = false
              if(res.Status == 200){
                _this.form.shop = ''
                _this.getShopList()
                _this.$message({
                  type:"success",
                  message:res.Message
                })
              }else{
                _this.$message.error(res.Message)
              }
            })
          }
        }
      },
      //授权跳转
      active(item) {
        // let _this = this;
        window.open('https://c.tb.cn/Y4.4rrqJ')
        // window.location = "https://oauth.taobao.com/authorize?response_type=code&client_id=23141709&redirect_uri=http://tbapi.hundda.com/toplogin.aspx&view=web&state=platform=502%26shop=" + btoa(encodeURI("{\"shop\":\"" + item.shopname + "\",\"sid\":8,\"belong\":2}"))
        // window.location ="https://oauth.taobao.com/authorize?response_type=code&client_id=23700513&redirect_uri=http://trade.taoesou.com/default.aspx&view=web&state=http://api.taoesou.com/api.aspx?platform=285%26act=bindshop_do%26shop=" + btoa(encodeURI("{\"shop\":\"" + item.row.shopname + "\",\"sid\":2,\"belong\":2}"))
      },
      //激活同步
      activation(row){
        let params = {
          shop_name:row.shopname
        }
        synchronizeshop(params).then(res=>{
          if(res.Status == 200){
            this.$message.success(res.Message)
            this.getShopList()
          }else{
            this.$message.error(res.Message)
          }
        })
      },
    },
    mounted() {
      // this.nowTime();
    }
  };
</script>
<style lang="scss">
  .bindingShops {
    .titles{
      overflow: hidden;
      padding:15px 10px;
    }
    .el-input__inner{
      height:30px;
    }
    .el-input__icon{
      margin-top:-5px;
    }
    .title h3 {
      display: inline-block;
      padding-left: 20px;
    }

  }
</style>
